<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Course</title>
    <script src="js/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="app">
    <h2>选课列表</h2>
    <div>
        <select v-model="courseId">
            <option value="0">全部课程</option>
            <option v-for="course in courses" v-bind:value="course.id">{{course.name}}</option>
        </select>
        <select v-model="year">
            <option value="">全部学年</option>
            <option v-for="year in years" v-bind:value="year">{{year}}</option>
        </select>
        <button v-on:click="openEnrollDlg">增加选课</button>
    </div>
    <table border="1" width="100%">
        <tr>
            <th>#</th>
            <th>Course Code</th>
            <th>Course Name</th>
            <th>College</th>
            <th>Student No.</th>
            <th>Student Name</th>
            <th>year</th>
            <th>operations</th>
        </tr>
        <tr v-for="(cs,index) in courseStudents">
            <td>{{index + 1}}</td>
            <td>{{cs.course.code}}</td>
            <td>{{cs.course.name}}</td>
            <td>{{!!cs.course.college ? cs.course.college.name : ''}}</td>
            <td>{{cs.student.no}}</td>
            <td>{{cs.student.firstname + ' ' + cs.student.lastname}}</td>
            <td>{{cs.id.year}}</td>
            <td>
                <button v-on:click="removeCourseStudent(cs.id)">移除</button>
            </td>
        </tr>
    </table>


    <dialog ref="dialog">
        <h3 align="center">增加选课学生</h3>
        <select multiple v-model="studentIds" style="flex:1 1 auto;">
            <option v-for="candidate in candidates" v-bind:value="candidate.id">
                {{candidate.firstname + ' ' + candidate.lastname}}
            </option>
        </select>
        <div class="action">
            <button v-on:click="cancalDialog()">Cancel</button>
            <button v-bind:disabled="studentIds.length === 0" v-on:click="addCourseStudents">Save</button>
        </div>
    </dialog>

</div>
<script>
    const app = {
        data() {
            return {
                courseStudents: [], // 选课数据
                courseId: 0, // 选中的课程 0-全部
                year: '', // 开课学年
                years: [2019, 2020, 2021, 2022, 2023], // 自定的可选学年
                courses: [], // 所有的课程 - 该数据用在课程下拉列表控件
                candidates: [], //候选学生
                studentIds: [] // 选课时选中的学生ID列表
            }
        },
        /** Vue生命周期函数 装载完毕*/
        mounted() {
            this.loadCourses();
// 读取选课情况
            this.loadCourseStudents();
        },
        /*定义Vue实例的一些方法*/
        methods: {
            /** 读取指定/全部课程选课情况 */
            loadCourseStudents() {
                axios.get('/course-student/course-student?courseId=' + this.courseId
                    + '&year=' + this.year).then(res => {
                    this.courseStudents = res.data;
                }).catch(err => {
                    console.error(err);
                });
            },
            /** 从后端读取所有课程信息*/
            loadCourses() {
                axios.get('/course/course').then(res => {
// 把返回结果赋值给data中的courses
                    this.courses = res.data;
                }).catch(err => {
                    console.error(err);
                });
            },
            /** 移除指定课程下的某学生，注意此处传来的是复合主键（课程id、学生id和开课学年） */
            removeCourseStudent(courseStudentId){
                axios.delete('/course-student/course-student',{data:courseStudentId}).then(res=>{
                    this.loadCourseStudents();
                }).catch(err=>{
                    console.error(err);
                });
            },
            /** 保存新增选课学生 */
            addCourseStudents() {
                axios.post('/course-student/course-student/' + '?studentIds=' + this.studentIds+'&courseId='+this.courseId).then(res => {
                    this.loadCourseStudents();
                    this.studentIds = [];
                    this.$refs.dialog.close();
                }).catch(err => {
                    console.error(err);
                    alert('增加选课失败');
                });
            },
            /** 打开选课学生对话框 */
            openEnrollDlg() {
                // 1. 读取候选学生
                if (this.courseId == 0) {
                    alert('请选择目标课程！');
                } else {
                    axios.get('/course-student/getAllStudents').then(res => {
                            this.candidates = res.data;
                            console.log(res.data)
                            // console.log(this.candidates+'this.candidates');
                            // 2. 开启选课对话框
                            this.$refs.dialog.showModal();
                        }
                    ).catch(err => {
                        console.error(err);
                        alert('读取候选学生失败！')
                    });
                }
            },
            cancalDialog(){
                this.$refs.dialog.close();
            }

        },
        watch: {
            /** 当选择课程变化时， 重新读取选课数据 */
            courseId(value) {
                this.loadCourseStudents();
            },
            /** 当选择开课年变化时， 重新读取选课数据 */
            year(value) {
                this.loadCourseStudents();
            }
        }
    }
    Vue.createApp(app).mount('#app');

</script>
</body>
</html>
